/**
 *  slideMenus
 */
import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    ListView,
    ScrollView,
    TouchableOpacity
} from 'react-native';

import Drawer from 'react-native-drawer'

export default class SlideMenus extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen : false,
            selectedItem:'About',
        };
    }
    
    closeControlPanel() {
        this._drawer.close()
    }

    openControlPanel() {
        // global.log(555);
        global.log(this._drawer,'-----')
        this._drawer.open()
    }

    render() {
        return(
            <Drawer
                type='displace'
                open={true}
                ref={(ref)=> this._drawer=ref}
                content={<View>
                    <Text>121212</Text>
                </View>}
                tapToClose={true}
                panOpenMask={0.2}
                openDrawerOffset={0.2} // 20% gap on the right side of drawer
                panCloseMask={0.2}
                closedDrawerOffset={0}
                styles={drawerStyles}
                tweenHandler={(ratio) => ({main: { opacity:(2-ratio)/2 }})}>
                <View>
                    <Text>121212</Text>
                </View>
            </Drawer>
        )
    }
}

const drawerStyles = {
    // backgroundColor: 'red'
}